<template>
	<div>
		<headers @back-click="back()" v-bind:headers="headers"></headers>
		<div class="content">
			 <div class="info">
	            <div class="reasons">
	                <div v-for="i in reasons" class="reason" ng-class="{'active':i.state}" on-tap="setCheck(i,$index)">
	                    <span class="txt">{{i.txt}}</span>
	                </div>
	            </div>
	            <textarea cols="30" rows="1" on-tap="setLast()" ng-model="obj.content" maxlength="50" placeholder="请输入取消原因"></textarea>
	        </div>
	        <div class="footerc">
	            <div class="btn-wrap-1">
	                <div class="btn btn-1" on-tap="confirm()" ng-class="{'active':(check==1||(check==2&&obj.content.length>0)) && clickable}" >提交</div>
	            </div>
	        </div>
        </div>
	</div>
</template>
<style lang="less" scoped>
	.content {
		position: relative;
		top: 44px;
		left: 0;
		& .info {
			text-align: left;
		    margin: 24px auto;
		    padding: 16px 20px;
		    width: 335px;
		    background: #fff;
		    border: .5px solid #ececec;
		    border-radius: 0;
		}
		& .reason {
		    position: relative;
		    height: 40px;
		    line-height: 40px;
		    background: url('../../assets/img/lease/untick-1.png') right center/20px 20px no-repeat;
		    font-size: 14px;
		    color: #666;
		    &:after {
			    position: absolute;
			    content: '';
			    width: 400%;
			    height: 1px;
			    background-color: #9E9E9E;
			    left: 0;
			    bottom: 0;
			}
		}
		& textarea {
		    width: 100%;
		    height: 34px;
		    line-height: 34px;
		    background-color: #f7f7f7;
		    font-size: 14px;
		    color: #b8b8b8;
		    padding: 10px;
		    overflow: hidden;
		    resize: none;
		}
		& .btn-wrap-1 {
		    width: 100%;
		    margin-top: 19px;
		}
		.btn {
		    margin: 0 auto;
		    height: 36px;
		    line-height: 36px;
		    width: 343px;
		    color: #fff;
		    font-size: 16px;
		    border-radius: 5px;
		    text-align: center;
		    background-color: #4C5B71;
		}
	}

</style>
<script>
	export default {
		components: {
        },
        data() {
        	return {
	        	headers:{
	                title:'取消订单',
	                skip:'',
	            },
	            reasons: [
	            	  {'txt':'我不想租了','state':false},
		              {'txt':'商品规格选错了','state':false},
		              {'txt':'收货地址写错了','state':false},
		              {'txt':'支付有问题','state':false},
		              {'txt':'我要重新下单','state':false},
		              {'txt':'测试下单/误下单','state':false},
		              {'txt':'其他原因','state':false}
	            ]
	        }
        },
        methods: {
            back(){
                this.$router.go(-1)
            }
        },
	}
</script>